<template>
  <div class="container">
    <div class="close"><span class="iconfont iconicon-test"></span></div>
    <div class="logo"><span class="iconfont iconnew"></span></div>
    <div class="inputs">
      <!-- <input placeholder="请输入手机号" class="input">
          <input placeholder="密码" class="input" type="password"></div> -->
      <!-- 
              通过value属性传值给子组件

              自定义组件：当我们给自定义组件设置属性的适合
                        这个书信会自动称为组件内根标签的属性
                        （注意：这个属性必须不存在子组件的props中，还有一些特殊属性也不会成为子组件根标签的属性，比如：id）
        -->
      <HmInput v-model='user.username'
               :reg='/^1[3,4,5,7,8,9]\d{9}$/'
               ref="username"
               placeholder="请输入手机号" />
      <HmInput v-model='user.password'
               ref="passname"
               type="password"
               placeholder="请输入密码" />

      <!-- 
            v-model:
                作用1：双向绑定表单元素的 value属性
                作用2：v-model会自动接收 input事件传递过来的值，并且把值同步给 v-model绑定的变量

            这里 v-model做了两件事
                1、将 username传递给子组件（相当于之前的 v-bind:value="user.name"）
                2、自动绑定了input事件（相当于之前写的 @getData = "setUsername"）
         -->

      <p class="tips">
        没有账号？
        <a href="#/register"
           class="">去注册</a>
      </p>
      <van-button round
                  icon="star-o"
                  type="danger"
                  @click="loginFn"
                  block>登录</van-button>
    </div>
  </div>
</template>

<script>
import HmInput from '../components/HmInput.vue'
import { login } from '../api/user'
export default {
  components: { HmInput },
  data() {
    return {
      user: {
        username: '',
        password: '',
      },
    }
  },
  methods: {
    loginFn() {
      // 通过ref属性获取到子组件，再通过获取到的子组件拿到里面isOk属性进行判断用户输入的内容是否正确
      if (!this.$refs.username.isOk && !this.$refs.password.isOk) {
        this.$toast.fail('账号或密码输入不正确')
        return
      }
      //   添加加载效果
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 0, // 持续展示 toast
      })
      login(this.user).then((res) => {
        // console.log(res)
        //   判断是否登录成功，如果登录成功跳转到首页
        if (res.data.message === '用户不存在') {
          // 全局注册的组件，使用的时候需要通过this调用
          this.$toast.fail('用户不存在')
        } else {
          // 登录成功,跳转首页
          this.$toast.success('登陆成功')
          //   console.log(res)
          this.$router.push({ path: '/personal' })
           // 缓存token和用户id
          localStorage.setItem('tokenLine', res.data.data.token)
          localStorage.setItem('userId', res.data.data.user.id)
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
.container {
  padding: 20px;
}
.close {
  span {
    font-size: (27 / 360) * 100vw;
  }
}
.logo {
  display: flex;
  justify-content: center;

  span {
    display: block;
    font-size: (126 / 360) * 100vw;
    color: #d81e06;
  }
}
.inputs {
  input {
    margin-bottom: 20px;
  }
}
.tips {
  text-align: right;
  margin-bottom: 20px;
  a {
    color: #3385ff;
  }
}
</style>